<template>
  <lay-config-provider :themeVariable="appStore.themeVariable" :theme="appStore.theme">
    <lay-layout :class="[
      //appStore.tab ? 'has-tab' : '',
      appStore.collapse ? 'collapse' : '',
      appStore.greyMode ? 'grey-mode' : '',
    ]">
      <!-- side -->
      <lay-side :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark':'light'">
        <lay-logo v-if="!appStore.collapse">{{userInfoStore.systemInfo.siteName}}</lay-logo>
        <lay-logo v-else>琪</lay-logo>
        <lay-scroll style="height: calc(100% - 62px)">
          <global-menu :collapse="appStore.collapse" v-if="appStore.modChange"></global-menu>
          <web-site-cate :collapse="appStore.collapse" v-if="!appStore.modChange"></web-site-cate>
        </lay-scroll>
      </lay-side>
      <lay-layout style="width: 0px">
        <!-- header -->
        <lay-header>
          <lay-menu class="layui-layout-left" v-model:selected-key="selectedKey">
            <lay-menu-item @click="collapse">
              <lay-icon v-if="appStore.collapse" type="layui-icon-spread-left"></lay-icon>
              <lay-icon v-else type="layui-icon-shrink-right"></lay-icon>
            </lay-menu-item>
            <lay-menu-item @click="refresh">
              <lay-icon type="layui-icon-refresh-one"></lay-icon>
            </lay-menu-item>

            <lay-menu-item @click="systemConfig" id="2">
              <lay-icon type="layui-icon-set"></lay-icon>系统设置
            </lay-menu-item>
            <lay-menu-item @click="website" id="1">
              <lay-icon type="layui-icon-website"></lay-icon>内容管理
            </lay-menu-item>


          </lay-menu>
          <lay-menu class="layui-layout-right">
            <lay-menu-item>
              <lay-tooltip content="全屏" position="bottom">
                <lay-fullscreen v-slot="{ toggle, isFullscreen }">
                  <lay-icon @click="toggle()" :type="
                    isFullscreen
                      ? 'layui-icon-screen-restore'
                      : 'layui-icon-screen-full'
                  "></lay-icon>
                </lay-fullscreen>
              </lay-tooltip>
            </lay-menu-item>
            <lay-menu-item @click="noticeChange">
              <lay-tooltip content="内部消息" position="bottom">
                <lay-icon type="layui-icon-notice"></lay-icon>
                <lay-badge theme="orange" v-if="userInfoStore.statistics.noticeNoRead>0">
                  {{userInfoStore.statistics.noticeNoRead}}
                </lay-badge>
              </lay-tooltip>
            </lay-menu-item>
            <lay-menu-item>
              <lay-tooltip content="网站" position="bottom">
                <a :href="userInfoStore.systemInfo.siteUrl" target="_blank">
                  <lay-icon type="layui-icon-website"></lay-icon>
                </a>
              </lay-tooltip>
            </lay-menu-item>
            <lay-menu-item @click="changeVisible">
              <lay-tooltip content="个性化设置" position="bottom">
                <lay-icon type="layui-icon-more-vertical"></lay-icon>
              </lay-tooltip>
            </lay-menu-item>
            <lay-menu-item @click="logOut">
              <lay-tooltip content="退出登录" position="bottom">
                <lay-icon type="layui-icon-logout"></lay-icon>
              </lay-tooltip>
            </lay-menu-item>

          </lay-menu>
        </lay-header>
        <!-- content -->
        <lay-body>
          <!-- <global-tab></global-tab> -->
          <GlobalBreadcrumb v-if="appStore.breadcrumb && appStore.modChange"></GlobalBreadcrumb>
          <global-content></global-content>
        </lay-body>
        <lay-footer></lay-footer>
      </lay-layout>
    </lay-layout>
    <global-setup v-model="visible"></global-setup>
  </lay-config-provider>
</template>

<script lang="ts">
import { computed, ref } from "vue";
import { useAppStore } from "../store/app";
import { useUserStore } from "../store/user";
import GlobalSetup from "./Global/GlobalSetup.vue";
import GlobalContent from "./Global/GlobalContent.vue";
import GlobalBreadcrumb from "./Global/GlobalBreadcrumb.vue";
//import GlobalTab from "./Global/GlobalTab.vue";
import GlobalMenu from "./Global/GlobalMenu.vue";
import { useRouter } from "vue-router";
import { Config, Statistics } from "../types/config";
import { UserInfo } from "../types/user";
import { delToken } from '../library/cookieUtil'
import { PerKey } from "../library/permissionConst"
import WebSiteCate from "./Global/WebSiteCate.vue";

export default {
  components: {
    GlobalSetup,
    GlobalContent,
    // GlobalTab,
    GlobalMenu,
    GlobalBreadcrumb,
    WebSiteCate
  },
  setup() {
    const fullscreenRef = ref(null);
    const appStore = useAppStore();
    const userInfoStore = useUserStore();
    const visible = ref(false);
    const router = useRouter();
    const sideWidth = computed(() => appStore.collapse ? "60px" : "220px")

    const changeVisible = function () {
      visible.value = !visible.value;
    };

    const currentIndex = ref("1");

    const collapse = function () {
      appStore.collapse = !appStore.collapse;
    };

    const refresh = function () {
      appStore.routerAlive = false;
      setTimeout(function () {
        appStore.routerAlive = true;
      }, 300);
    };
    const website = function () {
      appStore.modChange = false;
      router.push('/content/content');
    };
    const systemConfig = function () {
      router.push('/workspace/index');
      appStore.modChange = true;
    };
    const logOut = () => {
      delToken();
      const userInfoStore = useUserStore();
      userInfoStore.userInfo = [] as unknown as UserInfo;
      userInfoStore.systemInfo = <Config><unknown>[]
      userInfoStore.statistics = <Statistics><unknown>[]
      router.push("/login");
    };

    const noticeChange = () => {
      router.push('/notice/getlist');
    };
    const selectedKey = ref()
    selectedKey.value = appStore.modChange ? "2" : "1"//菜单选中

    return {
      sideWidth,
      changeVisible,
      fullscreenRef,
      collapse,
      appStore,
      refresh,
      visible,
      logOut,
      userInfoStore,
      currentIndex,
      PerKey,
      website, systemConfig, selectedKey, noticeChange
    };
  },
};
</script>

<style>
.layui-header .layui-nav-item:hover {
  background: whitesmoke;
}

.layui-header .layui-nav-item * {
  color: #666 !important;
}

.grey-mode {
  filter: grayscale(1);
}
</style>
